<template>
  <div class="myPassword_container">
    <div class="sideright">
      <div class="top-div">
        <span>修改密码</span>
      </div>
      <div class="botton-div">
        <div class="parcel-div">
          <form action="" method="">
            <div class="parcel-div">
              <div class="detail-div">
                <span>原密码:</span>
                <span>新密码:</span>
                <span>重复新密码:</span>
                <span>验证码:</span>
              </div>
              <div class="input-div">
                <input type="password" placeholder="输入原密码" v-model.trim="updatePassForm.uPassword" />
                <div class="account-tip">{{ tipInfo.pwd }}</div>
                <input type="password" placeholder="输入新密码" v-model.trim="updatePassForm.newPassword" />
                <div class="pwd-tip">{{ tipInfo.newPwd }}</div>
                <input type="password" placeholder="请再次输入密码" v-model.trim="updatePassForm.reuPassword" />
                <div class="rePwd-tip">{{ tipInfo.againPwd }}</div>
                <div class="vertify-div">
                  <input
                    id="vertify-input"
                    type="text"
                    placeholder="请输入验证码"
                    v-model.trim="updatePassForm.code"
                    autocomplete="off" />
                  <div class="vertify" ref="verify" @click="getImageGenerate"></div>
                </div>
                <div class="vertify-tip">{{ tipInfo.code }}</div>
              </div>
            </div>
            <div class="button-div">
              <input type="submit" @click="submitUpdatePassForm" />
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'myPassword',
  data() {
    return {
      updatePassForm: {
        userId: window.localStorage.getItem('userId'),
        uPassword: '',
        newPassword: '',
        reuPassword: '',
        code: ''
      },
      tipInfo: {
        pwd: '',
        newPwd: '',
        againPwd: '',
        code: ''
      }
    }
  },
  mounted() {
    this.getImageGenerate()
  },
  methods: {
    submitUpdatePassForm() {
      this.tipInfo = {
        pwd: '',
        newPwd: '',
        againPwd: '',
        code: ''
      }
      this.$http
        .post('/user/updatePass', this.updatePassForm)
        .then(res => {
          console.log(res)
          if (res.state === false) {
            if (res.code === '1') {
              this.tipInfo.pwd = res.errorMsg
            } else if (res.code === '2') {
              this.tipInfo.newPwd = res.errorMsg
            } else if (res.code === '3') {
              this.tipInfo.againPwd = res.errorMsg
            } else if (res.code === '4') {
              this.tipInfo.code = res.errorMsg
            }
            return
          }
          this.$message.success(res.data + ',即将退出登录')
          window.setTimeout(() => {
            this.$router.push('/login')
          }, 2000)
        })
        .catch(err => this.$message.error(err))
    },
    getImageGenerate() {
      this.$refs.verify.style.backgroundImage =
        'url(http://localhost:9999/user/updPassCode/?uId=' +
        window.localStorage.getItem('userId') +
        '&a=' +
        Math.random() +
        ')'
    }
  }
}
</script>

<style lang="less" scoped>
/********************* sideright *********************/
.sideright {
  width: 73%;
  padding: 5%;
  float: right;
  background-color: #fff;
  border: 1px solid #dbdbdb;
  .top-div {
    padding-bottom: 10px;
    border-bottom: 1px solid #dbdbdb;
    span {
      font-size: 1.5em;
    }
  }
  .botton-div {
    display: flex;
    padding: 30px;
    span {
      font-size: 18px;
    }
  }
  form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    .parcel-div {
      display: flex;
      align-items: center;
    }
  }
  .detail-div {
    display: flex;
    padding: 0 10px;
    align-items: flex-end;
    flex-direction: column;
    span {
      line-height: 44px;
      padding-bottom: 20px;
    }
  }
  .input-div {
    display: flex;
    flex-direction: column;
    #vertify-input {
      width: 10em;
    }
    input {
      width: 20em;
      height: 2.5em;
      outline: none;
      font-size: 16px;
      padding: 0 10px;
      border-radius: 5px;
      border: 2px solid #dbdbdb;
    }
  }
  .vertify-div {
    display: flex;
  }
  .vertify {
    width: 100%;
    margin-left: 10px;
    border-radius: 5px;
    border: 2px solid #dbdbdb;
  }
  .account-tip,
  .pwd-tip,
  .rePwd-tip,
  .vertify-tip {
    height: 20px;
    color: red;
  }
  .button-div {
    display: flex;
    justify-content: right;
    > input {
      border: none;
      color: #fff;
      cursor: pointer;
      padding: 8px 25px;
      border-radius: 5px;
      background-color: #1e9fff;
    }
  }
  .vertify {
    background-image: url('');
  }
}

/********************* 密码修改成功 *********************/
.pwdUpdateSuccess {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  width: 108px;
  height: 20px;
  margin: auto;
  display: none;
  position: absolute;
  padding: 12px 15px;
  border-radius: 10px;
  border: 1px solid #dbdbdb;
  background-color: rgba(0, 0, 0, 0.5);
  span {
    font-size: 18px;
    line-height: 20px;
    color: rgba(255, 255, 255, 0.8);
  }
}
</style>
